<template>
  <div class="app-container">
    <el-calendar v-model="date">
      <template slot="dateCell" slot-scope="{ date, data }">
        <div @contextmenu.prevent="onRightClick(data)">
          <el-row>
            <el-col :span="16">
              <div class="solar">
                {{ data.day.split("-")[2] }}
              </div>
            </el-col>
            <el-col :span="8">
              <el-tag v-if="holidayList.indexOf(data.day) == -1" effect="dark"
                >上班</el-tag
              >
              <el-tag v-else effect="dark" type="success">休息</el-tag>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="lunar" :class="{ festival: isFestival(date, data) }">
                {{ solarDate2lunar(data.day) }}
              </div>
            </el-col>
          </el-row>
        </div>
      </template>
    </el-calendar>
    <!-- 添加或修改节假日设置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="日期" prop="theDay">
          <el-input v-model="form.theDay" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="holidayType">
          <el-radio-group v-model="form.holidayType">
            <el-radio label="HOLIDAY_TYPE">休假</el-radio>
            <el-radio label="WORKDAY">上班</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          v-hasPermi="['mes:cal:calholiday:edit']"
          @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listCalholiday,
  getCalholiday,
  delCalholiday,
  addCalholiday,
  updateCalholiday,
} from "@/api/mes/cal/calholiday";
import { HOLIDAY_TYPE } from './data'
import calendar from "@/utils/calendar";
export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      date: new Date(),
      holidayList: [], //假日
      workdayList: [], //工作日
      // 弹出层标题
      title: "节假日设置",
      // 是否显示弹出层
      open: false,
      form: {},
      queryParams: {
        theDay: null,
        holidayType: HOLIDAY_TYPE.HOLIDAY,
        startTime: null,
        endTime: null,
      },
      // 表单校验
      rules: {
        holidayType: [
          { required: true, message: "请选择类型", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询节假日设置列表 */
    getList() {
      this.loading = true;
      this.holidayList = [];
      this.workdayList = [];
      let that = this;
      listCalholiday(this.queryParams).then((response) => {
        debugger;
        if (response.data != null) {
          response.data.forEach((theDay) => {
            if (theDay.holidayType == HOLIDAY_TYPE.HOLIDAY) {
              that.holidayList.push(theDay.theDay);
            } else {
              that.workdayList.push(theDay.theDay);
            }
          });
          this.loading = false;
        }
      });
    },
    onRightClick(date) {
      this.open = true;
      this.reset();
      this.form.theDay = date.day;
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addCalholiday(this.form).then((response) => {
            this.$modal.msgSuccess("设置成功");
            this.open = false;
            this.getList();
          });
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        holidayId: null,
        theDay: null,
        holidayType: HOLIDAY_TYPE.HOLIDAY,
        startTime: new Date().setHours(0),
        endTime: new Date().setHours(23),
      };
      this.resetForm("form");
    },
    isFestival(slotDate, slotData) {
      let solarDayArr = slotData.day.split("-");
      let lunarDay = calendar.solar2lunar(
        solarDayArr[0],
        solarDayArr[1],
        solarDayArr[2]
      );

      // 公历节日\农历节日\农历节气
      let festAndTerm = [];
      festAndTerm.push(
        lunarDay.festival == null ? "" : " " + lunarDay.festival
      );
      festAndTerm.push(
        lunarDay.lunarFestival == null ? "" : "" + lunarDay.lunarFestival
      );
      festAndTerm.push(lunarDay.Term == null ? "" : "" + lunarDay.Term);
      festAndTerm = festAndTerm.join("");

      return festAndTerm != "";
    },
    solarDate2lunar(solarDate) {
      var solar = solarDate.split("-");
      var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2]);

      let lunarMD = lunar.IMonthCn + lunar.IDayCn;
      // 公历节日\农历节日\农历节气
      let festAndTerm = [];
      festAndTerm.push(lunar.festival == null ? "" : " " + lunar.festival);
      festAndTerm.push(
        lunar.lunarFestival == null ? "" : "" + lunar.lunarFestival
      );
      festAndTerm.push(lunar.Term == null ? "" : "" + lunar.Term);
      festAndTerm = festAndTerm.join("");

      return festAndTerm == "" ? lunarMD : festAndTerm;
    },
  },
};
</script>

<style>
/**本月周末设置为红色*/
.el-calendar-table .current:nth-last-child(-n + 2) .solar {
  color: red;
}
/**本月农历设置为灰色*/
.el-calendar-table .current .lunar {
  color: #606266;
  font-size: small;
}
/**本月农历节日设置为红色*/
.el-calendar-table .current .lunar.festival {
  color: green;
  font-size: small;
}
/**节假日背景设置为绿色 */
.el-calendar-table .holiday {
  background-color: #88e325;
}
</style>
